<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>fuint会员营销管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">

  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
    /* 移动端 */
    @media screen and (max-width: 768px) {
      .layui-layout-admin .layui-layout-left,
      .layui-layout-admin .layui-body,
      .layui-layout-admin .layui-footer{left: 0;}
      .layui-layout-admin .layui-side{left: -300px;}
    }
  </style>
</head>
<body>
<!-- 内容主体区域 -->
    <div>
      <!-- 内容主体区域  面包屑-->
      <span class="layui-breadcrumb">
              <a href="index.html">首页</a>
              <a><cite>基础管理</cite></a>
              <a><cite>用户管理</cite></a>
            </span>

      <!-- 水平线 -->
      <hr class="layui-bg-blue">

      <!-- 搜索条件 -->
      <fieldset class="layui-elem-field">
        <legend>筛选条件</legend>
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
              <input type="text" id="search_username" placeholder="请输入用户名" class="layui-input">
            </div>

            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
              <input type="text" id="search_age" placeholder="请输入年龄" class="layui-input">
            </div>

            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
              <input type="text" id="search_sex" placeholder="请输入性别" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item layui-form-pane">
            <div class="layui-inline">
              <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
              <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
            </div>
          </div>
        </div>
      </fieldset>

      <table class="layui-hide" id="test" lay-filter="test"></table>

      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="insertUser">新增用户</button>
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
          <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
      </script>

      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

      <script type="text/html" id="insert_form">
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
              <input type="text" id="insert_username" class="layui-input" placeholder="请输入用户名">
            </div>
          </div>

          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
              <input type="text" id="insert_password" class="layui-input" placeholder="请输入密码">
            </div>
          </div>
        </div>
      </script>
    </div>

<script src="layui/layui.js" ></script>
<script src="jquery/jquery-3.6.0.js" ></script>
<script>


  let username = sessionStorage.getItem("username");

  $("#header_username").text(username);

  $("#iReset").click(function () {
    $("#search_username").val("");
    $("#search_age").val("");
    $("#search_sex").val("");
    tableFlush();
  });

  $("#searchVal").click(function () {
    let search_username = $("#search_username").val();
    let search_age = $("#search_age").val();
    let search_sex = $("#search_sex").val();
    let whereJSON = {};
    if(search_username != null && search_username != '') {
      whereJSON.username = search_username;
    }
    if(search_age != null && search_age != '') {
      whereJSON.age = search_age;
    }
    if(search_sex != null && search_sex != '') {
      whereJSON.sex = search_sex;
    }
    tableFlush(whereJSON);
  });

  function tableFlush(whereJSON) {
    layui.use('table', function(){
      var table = layui.table;
      //  render  渲染
      table.render({
        elem: '#test'
        ,url:'/user/selectByPage'
        ,where:whereJSON
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示'
          ,layEvent: 'LAYTABLE_TIPS'
          ,icon: 'layui-icon-tips'
        }]
        ,title: '用户数据表'
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{title:'ID', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.id +'</em>'
            }}
          ,{title:'用户名', width:200, unresize: true, templet: function(res){
              return '<em>'+ res.username +'</em>'
            }}
          ,{title:'密码', width:200, unresize: true, templet: function(res){
              return '<em>'+ res.password +'</em>'
            }}
          ,{title:'性别', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.sex +'</em>'
            }}
          ,{title:'年龄', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.age +'</em>'
            }}
          ,{title:'注册时间', width:180, unresize: true, templet: function(res){
              return '<em>'+ res.registerTime +'</em>'
            }}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
        ,page: true
      });

      //头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'insertUser':
            layer.open({     // 弹出框处理  模态框
              type: 1               // 模态框
              ,title: '新增用户' //不显示标题栏
              ,closeBtn: false
              ,area: ['500px','500px']  // 宽和高
              ,shade: 0.5
              ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
              ,btn: ['新增', '取消']
              ,btnAlign: 'c'
              ,moveType: 1 //拖拽模式，0或者1
              ,content: $('#insert_form').html()         // 引入自定义表单
              ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let username = $("#insert_username").val();
                let password = $("#insert_password").val();
                $.ajax({
                  url:"/user/insert",           // 请求路径
                  type:"post",                  // 请求的方式，不区分大小写
                  cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                  contentType:"application/json;charset=utf-8",
                  data: JSON.stringify({
                    username:username,
                    password:password
                  }),
                  datatype:"json",        // 返回类型，text文本、html页面、json数据
                  success:function(response){
                    console.log("返回: " + response);
                    if(response.code === 200) {
                      layer.msg("新增用户成功!");
                      layer.close(index);                         // 关闭当前窗口
                      tableFlush();
                    }
                  },
                  error:function(response){
                    console.log("出错返回: " + response);
                  }
                });
              }
              ,success: function(layero){

              }
            });
            break;
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
            break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选');
            break;

                //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        console.log(data)
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            $.ajax({
              url:"/user/deleteById",           // 请求路径
              type:"post",                  // 请求的方式，不区分大小写
              cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
              data: {
                id:data.id
              },
              datatype:"json",        // 返回类型，text文本、html页面、json数据
              success:function(response){
                console.log("返回: " + response);
                if(response.code === 200) {
                  layer.msg("删除用户成功!");
                  layer.close(index);                         // 关闭当前窗口
                  tableFlush();
                }
              },
              error:function(response){
                console.log("出错返回: " + response);
              }
            });
          });
        } else if(obj.event === 'edit'){
          layer.prompt({
            formType: 2
            ,value: data.email
          }, function(value, index){
            obj.update({
              email: value
            });
            layer.close(index);
          });
        }
      });
    });
  }

  tableFlush();
</script>

</body>
</html>